<template>
  <div class="harder_wrap">
    <div class="nav_wrap">
      <div class="harder_wrap_nav">
        <div class="nav_left">
          <div class="login" @click="goIndex">
            <span class="iconfont icon-ico_med_service"></span>
            <span class="title">网易云音乐</span>
          </div>
          <div @click="isShow = true">发现音乐</div>
          <div @click="isShow = false">我的音乐</div>
          <div @click="isShow = false">关注</div>
          <div @click="isShow = false">商城</div>
          <div @click="isShow = false">音乐人</div>
          <div @click="isShow = false">下载客户端</div>
          <div class="hot">HOT</div>
        </div>
        <div class="nav_right">
          <div class="search">
            <span class="iconfont icon-ico_med_board"></span>
            <input class="inp" placeholder="音乐/视频/电台/用户" />
          </div>
          <div class="user">创作者中心</div>
          <div class="avatar" v-show="false">
            <img src="../../style/images/6.jpg" alt="" class="img" />
            <div class="downBox">
              <div class="box_item">我的主页</div>
              <div class="box_item">我的信息</div>
              <div class="box_item">我的等级</div>
              <div class="box_item">VIP</div>
              <div class="box_item">个人设置</div>
              <div class="box_item">实名认证</div>
              <div class="box_item">退出登录</div>
            </div>
          </div>
          <div class="goLogin" @click="goLogin">去登录</div>
        </div>
      </div>
    </div>
    <div class="option_wrap" v-if="isShow">
      <div class="option">
        <div>推荐</div>
        <div>排行榜</div>
        <div>歌单</div>
        <div>主播电台</div>
        <div>歌手</div>
        <div>新碟上架</div>
      </div>
    </div>
  </div>
  <div class="login_wrap" v-if="isShowCode">
    <div class="mask"></div>
    <div class="loginBox">
      <div class="loginBox_title">登录</div>
      <div class="loginBox__main">
        <img src="../../style/images/1.jpg" alt="扫码" class="codeImg" />
        <div class="code_wrap">
          <div class="code_title">扫码登录</div>
          <img :src="code" alt="" class="code" />
          <div class="code_tip">
            使用 <span class="App">网易云音乐APP</span> 扫码登录
          </div>
        </div>
      </div>
      <div class="login_footer">
        <div class="code_btn">选择其他的登录方式</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "harder",
};
</script>

<script lang="ts" setup>
import { getLoginKeyApi, getLoginQrApi } from "../../api/login/index";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const isShow = ref(true);
const isShowCode = ref(false);

const code = ref("");
const goIndex = () => {
  router.push("/home");
};
const goLogin = async () => {
  isShowCode.value = true
  const { unikey } = await getLoginKeyApi();
  const { qrurl,qrimg } = await getLoginQrApi(unikey);
  // {	"id": 330590056,
	// 			"name": "暮已丶成昼",
	// 			"url": "https://p2.music.126.net/qGDgogXpPyQ1NXfSePW4OA==/109951164332698501.jpg",
	// 			"token": "00D20E59850604758A1DFC8ADB222BADED0E731FCB5AED3376706291750A7081B980934018651287
  //       220F94A308EB593C08BA139F565565CEAED8884C2D80701E7BF9C007A4F954CC0DC0844045E4999898787
  //       E1CE8017E756421BAACB78D5CAF4DB9B455ABC95B736EE7C9D1B4862EE1C46CE2C94CD3694DDFB5BBDD3B7A651
  //       7D237988E4B6E211347ECE89E5003437889D22C3A690A296E0E795621A0646959492929D62545F06F7477E4C31A227BFB00
  //       1B043E9B45A1AA8A7E880AB21DD15A2DD56106DF30B33CA48EB4A0539C3CF004972E9A3795103D33BB6ED44EAEAFEB10ED496
  //       8CBE95D791EFA67486C974AAFCB5D82D001DEC9676BA79DD2ECB231CCC3CD77A55FCF9F4C056880FAB18B378A0DB12B46F7631F45
  //       9705CDBD6125A2B857854CC34305CB49B682659AD92073ABCA4F65D3F447CA1B78C7AA8A744F17C62ECA91EA86DF046428F9709C75C
  //       652398F4005FE954E2106B36276F8AEFFC145A130C74318469DC8FE72602BFA1523873C"}
};
</script>

<style scoped>
.nav_wrap {
  color: #fff;
  width: 100%;
  min-width: 1200px;
  background-color: #242424;
}
.harder_wrap_nav {
  margin: 0 auto;
  width: 1200px;
  display: flex;
  justify-content: space-between;
  height: 75px;
}
.nav_left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 100%;
  width: 600px;
  cursor: pointer;
}
.hot {
  position: absolute;
  right: -40px;
  top: 25px;
  width: 30px;
  height: 15px;
  border-radius: 40%;
  color: #fff;
  background-color: red;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
}
.goLogin {
  font-size: 14px;
}
.goLogin:hover {
  text-decoration: underline;
}
.title {
  font-weight: 600;
  letter-spacing: 4px;
}
.icon-ico_med_service {
  font-size: 30px;
  margin-right: 7px;
  color: red;
}
.nav_right {
  display: flex;
  align-items: center;
}
.search {
  height: 30px;
  width: 160px;
  background-color: #fff;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.icon-ico_med_board {
  color: red;
}
.inp {
  border: none;
  width: 120px;
  font-size: 12px;
  outline: none;
}
.user {
  height: 20px;
  line-height: 20px;
  margin: 0 15px;
  border: 1px solid #333;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 30px;
}
.avatar {
  width: 30px;
  height: 30px;
  position: relative;
}
.downBox {
  padding: 5px;
  width: 120px;
  position: absolute;
  top: 30px;
  left: -40px;
  background-color: #242424;
  display: flex;
  justify-content: center;
  display: none;
  flex-direction: column;
  color: #fff;
  font-size: 12px;
}
.box_item {
  padding: 10px 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.box_item:hover {
  background-color: black;
}
.avatar:hover .downBox {
  display: block;
}
.img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.option_wrap {
  width: 100%;
  min-width: 1200px;
  background-color: red;
}
.option {
  width: 500px;
  margin-left: 350px;
  height: 35px;
  font-size: 14px;
  line-height: 35px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.login_wrap {
  position: relative;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* width: 100vw;
  height: 100vh; */

  background-color: rgb(0, 0, 0, 0.5);
}
.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  width: 500px;
  /* height: 450px; */
  z-index: 10;
}
.loginBox_title {
  background-color: #242424;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.loginBox__main {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.codeImg {
  width: 120px;
  margin-right: 50px;
}
.code_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.code {
  width: 150px;
  height: 150px;
  margin: 12px 0;
}
.code_title {
  font-size: 18px;
}
.code_tip {
  font-size: 12px;
  color: #555;
}
.App {
  color: #0c73c2;
}
.code_btn {
  text-align: center;
  width: 120px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 30px;
  margin: 0 auto;
  border: 1px solid #555;
}
.login_footer {
  height: 60px;

  background-color: #fff;
  margin-bottom: 30px;
}
</style>
